<template>
  <div class="castle">
    <TopSide :title="title"></TopSide>
    <TopMid></TopMid>
    <Left></Left>
    <Right></Right>
    <baidu-map class="bm-view"   :center="center"  :zoom="zoom" @ready="handler" :inertial-dragging="true"   :scroll-wheel-zoom="false" :mapStyle="mapStyle" >
      <bm-marker v-for="item in pointsdata"  :key="item.id" :position="item.center"  :icon="{url: path1, size: {width: 30, height: 30}}" v-if="item.errorcount > 0" animation="BMAP_ANIMATION_BOUNCE" :dragging="false" @click="clickMark" @mouseover="mouseoverMark" @mouseout="mouseoutMark">

      </bm-marker>

      <bm-marker v-for="item in pointsdata"  :key="item.id" :position="item.center"  :icon="{url:  path2, size: {width: 30, height: 30}}" v-if="item.errorcount == 0"   :dragging="false" @click="clickMark" @mouseover="mouseoverMark" @mouseout="mouseoutMark">

      </bm-marker>
      <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
      <bm-info-window :position="infoWindow.position"  :title="infoWindow.title" :show="infoWindow.show" style="font-size: large" >
        <p v-text="infoWindow.contents" style="font-size: large"></p>
      </bm-info-window>
    </baidu-map>

    <Foot></Foot>
  </div>
</template>
<script>
import TopSide from '../../common/TopSide'
import TopMid from '../../common/TopMid'
import Left from './Left'
import Right from './Right'
import Foot from './Foot'
export default {
  name: 'Castle',
  data () {
    return {
      path1: require('../../../../src/assets/images/common/map-marker-2-321.png'),
      path2: require('../../../../src/assets/images/common/map-marker-2-32.png'),
      infoWindow: {
        show: true,
        title: '',
        contents: '',
        position: {}
      },
      title: sessionStorage.getItem('CompanyName') + '-' + '实时数据系统',
      center: {lng: 108, lat: 34},
      zoom: 3,
      pointsdata: [],
      mapStyle: {
        styleJson: [
          {
            'featureType': 'land',
            'elementType': 'geometry',
            'stylers': {
              'color': '#e7f7fc'
            }
          },
          {
            'featureType': 'water',
            'elementType': 'all',
            'stylers': {
              'color': '#96b5d6'
            }
          },
          {
            'featureType': 'green',
            'elementType': 'all',
            'stylers': {
              'color': '#b0d3dd'
            }
          },
          {
            'featureType': 'highway',
            'elementType': 'geometry.fill',
            'stylers': {
              'color': '#a6cfcf'
            }
          },
          {
            'featureType': 'highway',
            'elementType': 'geometry.stroke',
            'stylers': {
              'color': '#7dabb3'
            }
          },
          {
            'featureType': 'arterial',
            'elementType': 'geometry.fill',
            'stylers': {
              'color': '#e7f7fc'
            }
          },
          {
            'featureType': 'arterial',
            'elementType': 'geometry.stroke',
            'stylers': {
              'color': '#b0d5d4'
            }
          },
          {
            'featureType': 'local',
            'elementType': 'labels.text.fill',
            'stylers': {
              'color': '#7a959a'
            }
          },
          {
            'featureType': 'local',
            'elementType': 'labels.text.stroke',
            'stylers': {
              'color': '#d6e4e5'
            }
          },
          {
            'featureType': 'arterial',
            'elementType': 'labels.text.fill',
            'stylers': {
              'color': '#374a46'
            }
          },
          {
            'featureType': 'highway',
            'elementType': 'labels.text.fill',
            'stylers': {
              'color': '#374a46'
            }
          },
          {
            'featureType': 'highway',
            'elementType': 'labels.text.stroke',
            'stylers': {
              'color': '#e9eeed'
            }
          }
        ]
      }
    }
  },
  components: {
    TopSide,
    TopMid,
    Left,
    Right,
    Foot
  },
  methods: {
    mouseoverMark ({type, target, point, pixel}) {
      this.pointsdata.forEach((item) => {
        if (target.point.lat === item.center.lat && target.point.lng === item.center.lng) {
          this.infoWindow.title = item.projectName
          this.infoWindow.contents = item.address
        }
      })
      this.infoWindow.position = target.point
      this.infoWindow.show = true
    },
    mouseoutMark ({type, target, point, pixel}) {
      this.infoWindow.show = false
    },
    clickMark ({type, target}) {
      this.center.lng = target.LA.lng
      this.center.lat = target.LA.lat
      this.zoom = 15
    },
    handler ({BMap, map}) {
      if (this.pointsdata.length !== 0) {
        this.center.lng = this.pointsdata.lng
        this.center.lat = this.pointsdata.lat
      }
      this.zoom = 6
      this.loadData()
      this.refresh()
    },
    loadData () {
      this.postRequest('Project/List', {
        parentName: '中国',
        pagesize: 200,
        pagenum: 1
      }).then((res) => {
        console.log('刷新地图信息')
        res.data.data.forEach((item) => {
          var point = {lng: 0, lat: 0}
          point.lng = item.lng
          point.lat = item.lat
          item.center = point
        })
        this.pointsdata = res.data.data
      })
    },
    refresh () {
      setInterval(this.loadData, 60000)
    }
  }
}
</script>
<style scoped>
  .bm-view {
    width: 1920px;
    height: 1200px;
    margin: 0 auto;
    border:10px solid #96c2f1;background:#eff7ff;
    transform: translateY(220px) translateX(-30px);

  }
</style>
